<!--
 * @Description: 左侧二级子菜单
 * @Author: wangfuwei
 * @Date: 2020-12-19 16:10:24
 * @LastEditors: wangfuwei
 * @LastEditTime: 2020-12-28 23:36:46
 * @FilePath: /horizon-frontend/src/components/SideMenu/SubMenu.vue
-->
<template>
  <div class="sub-menu-popover-inner-content" :style="{ height: scrollHeight + 'px' }">
    <vue-scroll :ops="{ scrollPanel: { scrollingX: false } }">
      <!-- 普通二级子菜单 -->
      <template v-if="!isGroup">
        <div v-for="item in menus" :key="item.fdId" :title="$t(`${item.fdId}.name`)" class="menu-item">
          <div class="title"><span v-text="$t(`${item.fdId}.name`)" /></div>
          <div :class="['star', { shortcut: item.shortcut }]" v-if="!item.children" style="visibility:hidden">
            <a-icon type="star" :theme="item.shortcut ? 'filled' : 'outlined'" />
          </div>
        </div>
      </template>

      <!-- 分组二级子菜单 -->
      <template v-else>
        <div v-for="(row, index) in menus" :key="index" class="warper" :style="{ width: groupWidth + 'px' }">
          <div v-for="group in row" class="group" :key="group.fdId" :style="{ flexGrow: group.colspan > 1 ? 1 : 0 }">
            <!-- 分组标题 -->
            <div class="group-title" :title="$t(`${group.fdId}.name`)">
              <div class="title"><span v-text="$t(`${group.fdId}.name`)" /></div>
            </div>
            <!-- 分割线 -->
            <div class="divider" />
            <!-- 二级子菜单 -->
            <div class="group-item">
              <div v-for="item in group.children" :key="item.fdId" :title="$t(`${item.fdId}.name`)" class="item">
                <span v-text="$t(`${item.fdId}.name`)" />
                <div :class="['star', { shortcut: item.shortcut }]" v-if="!item.children" style="visibility:hidden">
                  <a-icon type="star" :theme="item.shortcut ? 'filled' : 'outlined'" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </vue-scroll>
  </div>
</template>

<script>
export default {
  props: {
    menu: {
      type: Object,
      required: true,
      default() {
        return {};
      },
    },
  },
  computed: {
    isGroup() {
      //是否分组二级菜单
      return this.menu.children.some(element => {
        if (element.children) return true;
      });
    },
    menus: function() {
      //分组二级菜单封装
      if (this.isGroup) {
        const maxRow = 5;
        const maxCol = 4;

        let groups = [];
        let groupIndex = 0;
        let groupCount = 0;
        this.menu.children.forEach(element => {
          let newMenu = { ...element };
          if (!element.children) {
            newMenu["children"] = [element];
          }
          newMenu["colspan"] = Math.ceil(newMenu.children.length / maxRow);

          let group = groups[groupIndex];
          if (!group) {
            group = [];
            groups[groupIndex] = group;
          }
          let colspan = newMenu["colspan"];
          if (groupCount + colspan === maxCol) {
            group.push(newMenu);
            groupIndex++;
            groupCount = 0;
          } else if (groupCount + colspan > maxCol) {
            groupIndex++;
            groupCount = colspan;
            group = [newMenu];
            groups[groupIndex] = group;
          } else {
            group.push(newMenu);
            groupCount += colspan;
          }
        });

        console.log(groups);
        return groups;
      }
      return this.menu.children;
    },
    scrollHeight() {
      //二级菜单高度
      if (!this.isGroup) return 42 * this.menus.length + 8;
      let count = 0;
      this.menus.forEach(group => {
        let max = 0;
        group.forEach(element => {
          if (element.children.length > max) max = element.children.length;
        });
        count += max > 5 ? 5 : max;
      });
      return 40 * count + (45 + 1 + 30) * this.menus.length + 5;
    },
    groupWidth() {
      //二级菜单高度
      if (!this.isGroup) return null;
      let max = 0;
      this.menus.forEach(group => {
        let count = 0;
        group.forEach(element => {
          count += element["colspan"];
        });
        if (count > max) max = count;
      });

      return 200 * max;
    },
  },
  methods: {},
};
</script>

<!-- 普通二级子菜单样式 -->
<style lang="less">
@import "~ant-design-vue/lib/style/themes/default";

.sub-menu {
  padding: 0;

  .ant-popover-content {
    margin-left: -4px;
    background-color: #262626;
  }

  .ant-popover-arrow {
    display: none;
  }
  .ant-popover-inner {
    background-color: #262626;
    border-radius: 0;
    box-shadow: none;
  }

  .ant-popover-inner-content {
    padding: 0;
  }
  .sub-menu-popover-inner-content {
    color: #c1cadc;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    padding: 0 0 0 10px;
    max-height: calc(100vh - 52px);
    border-top: 1px solid rgba(218, 222, 237, 0.1);
    border-bottom: 1px solid rgba(218, 222, 237, 0.1);

    .menu-item {
      display: flex;
      cursor: pointer;

      &:first-child {
        padding-top: 4px;
      }

      &:last-child {
        padding-bottom: 4px;
      }

      div {
        height: 42px;
        display: flex;
        align-items: center;
      }

      .title {
        padding-right: 10px;
        font-size: 13px;
        max-width: 200px;
        min-width: 90px;
        span {
          margin-right: 15px;
          white-space: nowrap;
          user-select: none;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .star {
        font-size: 13px;
        position: absolute;
        right: 10px;
        color: #fff;
        &:hover,
        &.shortcut {
          color: #ffc859;
        }
      }

      &:hover {
        .star {
          visibility: visible !important;
        }
      }

      &:hover {
        color: @primary-color;
        transition-delay: 0.1s;
      }
    }
  }
}
</style>

<!-- 分组二级子菜单样式 -->
<style lang="less" scoped>
@import "~ant-design-vue/lib/style/themes/default";
@margin-right: 30px;
@item-width: 170px;

.warper {
  display: flex;
  background-color: #262626;
  color: #c1cadc;

  .group {
    max-height: 600px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 30px;

    .group-title {
      display: flex;
      flex-wrap: wrap;

      .title {
        width: @item-width;
        height: 45px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 600;
        flex-grow: 1;
        color: #fff;
        margin-right: @margin-right;

        span {
          margin-right: 15px;
          white-space: nowrap;
          user-select: none;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .divider {
      border-bottom: 1px solid rgba(218, 222, 237, 0.2);
      height: 1px;
      margin-right: @margin-right;
    }

    .group-item {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      max-height: 200px;
      cursor: pointer;

      .item {
        width: @item-width;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: @margin-right;

        span {
          margin-right: 15px;
          white-space: nowrap;
          user-select: none;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .star {
          font-size: 13px;
          color: #fff;
          height: 40px;
          line-height: 40px;
          margin-right: 5px;
          color: #fff;
          &:hover,
          &.shortcut {
            color: #ffc859;
          }
        }

        &:hover {
          .star {
            visibility: visible !important;
          }
        }

        &:hover {
          color: @primary-color;
          transition-delay: 0.1s;
        }
      }
    }
  }
}
</style>
